<template>
  <div>
    <!-- 1. -->
    <h1>面包屑导航</h1>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/elementUI' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
     <!-- 2.定义卡片视图 -->
    <el-card class="box-card">
      <!-- 4. 栅格: 将一行固定划分为24块 可以调整每块所占的大小   -->
        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple">
                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                 <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
          </div>
          </el-col>
          <el-col :span="4"><div class="grid-content bg-purple">
               <el-button type="primary" round @click="dialogVisible = true" >点击显示</el-button>
          </div>
          </el-col>
        </el-row>
        <!-- 5.弹出框操作
                  title="弹出框的标题元素"
                  :visible.sync="dialogVisible"  控制弹出框是否展现 true/false
                -->
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span>这是一段信息</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 6.表单提交  ref="为表单定义一个ID"
                    model 是elementUI中特定的属性   负责绑定数据
                  -->

       
    </el-card>
</div>
</template>

<script>
//对外声明 当前组件的属性export default 将组件交给VUE对象管理
export default {
  data(){
    return {
      dialogVisible: false,
      //form表单中的数据有多个所以采用对象
      addUser: {
          username: '',
          password: ''
      }
    }
  },
  methods: {

  }
}

</script>

<style>
  .hwCard {
      width: 100%;
      height: 500px;
    }

   .el-row {
      margin-bottom: 20px;
      &:last-child {
      margin-bottom: 0;
      }
    }
</style>
